import React, { Component } from 'react'
import swiper from 'swiper'
import Axios from 'axios';
import {connect} from 'react-redux'

class Menu extends Component {
    state={
        swiper:[],
        curindex:0
    }
    componentDidMount(){
        Axios.get('/list').then(res=>{
            this.setState({
                swiper:res.data.swiper
            })
            new swiper('.swiper-container',{
                loop:true,
                autoplay:true,
                pagination:{
                    el:".swiper-pagination"
                }
            })
        //     this.props.setlist(res.data.list)
        })
    }
    changeindex=(index)=>{
        this.setState({
            curindex:index
        })
    }
    render() {
        return (
            <div className="menu-wrap">
                <div className="swiper-container">
                    <div className="swiper-wrapper">
                        {
                            this.state.swiper.map((item,index)=>{
                                return <div className="swiper-slide" key={index}>
                                    <img src={item.image} alt=""/>
                                    </div>
                            })
                        }
                    </div>
                    <div className="swiper-pagination"></div>
                </div>

                <div className="tab">
                    <div className="type-area">
                        <ul>
                            {
                                this.props.list.map((item,index)=>{
                                    return <li key={index} className={index===this.state.curindex?'active':''}
                                    onClick={()=>this.changeindex(index)}>{item.title}</li>
                                })
                            }
                        </ul>
                    </div>
                    
                    <div className="content-wrap">
                        <div className="content">
                            {
                                this.props.list[this.state.curindex] &&
                                this.props.list[this.state.curindex].children.map((item,index)=>{
                                    return <dl key={item.id}>
                                        <dt><img src={item.image} alt=""/></dt>
                                        <dd>
                                            <p>商品名:{item.title}</p>
                                            <p>价格：￥{item.price}</p>
                                            {Number(item.num)>0?<p>
                                                <b>商品剩余数量：{item.num}个</b>
                                                <span onClick={()=>this.props.addCar(item)}>添加到我的</span>
                                            </p>:
                                            <p>掌柜正在赶工，先看看其他商品吧~</p>}
                                        </dd>
                                    </dl>
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
let mapState=(state)=>{
    return {
        list:state.reducer.tablist
    }
}
let mapDispatch=(dispatch)=>{
    return {
        // setlist(list){
        //     dispatch({
        //         type:'SET_LIST',
        //         list
        //     })
        // },
        addCar(pro){
            dispatch({
                type:"ADD",
                pro
            })
        }
    }
}
export default connect( mapState,mapDispatch )(Menu)